import "leaflet.pm";
import "leaflet.pm/dist/leaflet.pm.css";
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import 'leaflet-draw'
import 'leaflet-draw/dist/leaflet.draw.css'
// import 'leaflet-draw/dist/leaflet.draw-cn.js'
export function useTools(map) {
    /*
    // 添加绘制工具
    map.pm.setLang('zh') //中文提示
    map.pm.addControls({
        position: "topleft",
        drawPolygon: true, //绘制多边形,仅五级网格绘制
        drawMarker: false, //绘制标记点
        drawCircleMarker: false, //绘制圆形标记
        drawPolyline: true, //绘制线条
        drawRectangle: true, //绘制矩形
        drawCircle: true, //绘制圆圈
        editMode: false, //编辑多边形
        dragMode: true, //拖动多边形
        cutPolygon: true, //添加⼀个按钮以删除图层⾥⾯的部分内容
        removalMode: false, //清除图层
    })
    // 全局绘制样式
    map.pm.setPathOptions({
        color: "orange",
        fillColor: "green",
        fillOpacity: 0.4,
    })
    // 或者单独设置绘制样式
    let options = {
        // 连接线标记之间的线 实线 
        templineStyle: {
            color: "red",
        },
        // 提⽰线从最后⼀个标记到⿏标光标的线虚线
        hintlineStyle: {
            color: "red",
            dashArray: [5, 5],
        },
        // 绘制完成的样式
        pathOptions: {
            color: "orange",
            fillColor: "green",
        },
    }
    // 激活绘制多边形功能、单独设置某个模式的样式
    map.pm.enableDraw("Polygon", options)
    // 启用绘制--多边形功能
    map.pm.enableDraw("Polygon", {
        snappable: true, //启⽤捕捉到其他绘制图形的顶点
        snapDistance: 20, //顶点捕捉距离
    })
    // 关闭绘制--注意也可以关闭其他模式的绘制功能
    map.pm.disableDraw("Polygon")
    // 绘制事件监听
    map.on("pm:drawstart", ({ workingLayer }) => {
        workingLayer.on('pm:vertexadded', (e) => {
            console.log(e)
        })
    })
    map.on("pm:drawend", (e) => {
        console.log(e, "禁⽌绘制、绘制结束");
    })
    map.on("pm:create", (e) => {
        console.log(e, "绘制完成时调⽤");
    })
    map.on("pm:globalremovalmodetoggled", (e) => {
        console.log(e, "清除图层时调用");
    })
*/
    //添加绘制图层
    // L.drawLocal('zh')
    let drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);
    //添加绘制控件
    // let drawControl = new L.Control.Draw({
    //     draw: {
    //         polyline: true, //绘制线
    //         polygon: true,  //绘制多边形
    //         rectangle: true, //绘制矩形
    //         circle: true,//绘制圆
    //         marker: true,   //绘制标注
    //         circlemarker: true, //绘制圆形标注

    //     },
    //     edit: {
    //         featureGroup: drawnItems, //绘制图层   
    //         edit: true,   //图形编辑控件
    //         remove: true, //图形删除控件
    //     }
    // });

    //添加绘制控件
    // map.addControl(drawControl);
    // 线段提示
    L.drawLocal.draw = {
        toolbar: {
            actions: {
                // title: '取消绘图',
                text: '取消绘图'
            },
            finish: {
                // title: '完成绘图',
                text: '完成绘图'
            },
            undo: {
                // title: '删除最后绘制的点',//'Delete last point drawn',
                text: '删除最后绘制的点',//'Delete last point'
            },
            buttons: {
                polyline: '绘制一个多段线',//'Draw a polyline',
                polygon: '绘制一个多边形',//'Draw a polygon',
                rectangle: '绘制一个矩形',//'Draw a rectangle',
                circle: '绘制一个圆',//'Draw a circle',
                marker: '绘制一个标记',//'Draw a marker',
                circlemarker: '绘制一个圆形标记',//'Draw a circlemarker'
            }
        },
        handlers: {
            circle: {
                tooltip: {
                    start: '单击并拖动以绘制圆',//'Click and drag to draw circle.'
                },
            },
            simpleshape: {
                tooltip: {
                    end: '释放鼠标完成绘图',//'Release mouse to finish drawing.'
                }
            },
            rectangle: {
                tooltip: {
                    start: '单击并拖动以绘制矩形',//'Click and drag to draw rectangle.'
                }
            },
            polyline: {
                tooltip: {
                    start: '单击开始绘制线',//'Click to start drawing line.',
                    cont: '单击以继续绘制线',//'Click to continue drawing line.',
                    end: '单击“最后一点”以结束线',//'Click last point to finish line.'
                }
            },
            polygon: {
                tooltip: {
                    start: '单击开始绘制形状',//'Click to start drawing shape.',
                    cont: '单击继续绘制形状',//'Click to continue drawing shape.',
                    end: '单击第一个点关闭此形状',//'Click first point to close this shape.'
                }
            },
            marker: {
                tooltip: {
                    start: '单击“地图”以放置标记',//'Click and drag to draw circle.'
                },
            },
            circlemarker: {
                tooltip: {
                    start: '单击“地图”以放置圆标记',//'Click map to place circle marker.'
                }
            },
        },

    }
    L.drawLocal.edit = {
        toolbar: {
            actions: {
                save: {
                    // title: '保存更改',//'Save changes',
                    text: '保存',//'Save'
                },
                cancel: {
                    // title: '取消编辑，放弃所有更改',//'Cancel editing, discards all changes',
                    text: '取消',//'Cancel'
                },
                clearAll: {
                    // title: '清除所有图层',//'Clear all layers',
                    text: '清除所有',//'Clear All'
                }
            },
            buttons: {
                edit: '编辑图层',//'Edit layers',
                editDisabled: '无可编辑的图层',//'No layers to edit',
                remove: '删除图层',//'Delete layers',
                removeDisabled: '无可删除的图层',//'No layers to delete'
            }
        },
        handlers: {
            edit: {
                tooltip: {
                    text: '拖动控制柄或标记以编辑要素',//'Drag handles or markers to edit features.',
                    subtext: '单击“取消”撤消更改',//'Click cancel to undo changes.'
                }
            },
            remove: {
                tooltip: {
                    text: '单击要删除的要素',//'Click on a feature to remove.'
                }
            }
        }
    }

    //绘制事件
    map.on(L.Draw.Event.CREATED, function (e) {
        console.log('ejs', e);
        let type = e.layerType;
        //获取绘制图层
        let drawlayer = e.layer;
        console.log('type', type, 'drawlayer', drawlayer);
        if (type === 'marker') {
            L.icon({
                iconUrl: require("@/assets/leaflet/person1.png"),
                iconSize: [50, 50],
            })
            drawlayer.bindPopup('A popup!');
        }
        drawnItems.addLayer(drawlayer);
    });
}